<script setup>
import {quaryServerApi,addServerApi,getServerByIdApi,updateByIdApi,deleteByIdApi} from '@/api/server'
import { ref,onMounted } from 'vue';
// 导入图片上传失败的警告提示信息需要的组件
import { ElMessage } from 'element-plus';

//搜索框
const searchServer = ref({
    name:''
})
//表格数据
const serverList = ref([])

//定义分页数据
const currentPage=ref(1)
const pageSize = ref(3)
//总条数
const total = ref(0)
const size= 'default'
const disabled = false
const background = true 
//分页每页大小发生改变（每页展示val条数据）
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  //页码从第一页开始
  currentPage.value=1
  //每页多少条
  pageSize.value=val
  //执行搜索
  searchHandler()
}
//当前页发生改变（当前是第val页）
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  //当前页发生变化
  currentPage.value=val
  //执行搜索
  searchHandler()
}


//执行分页搜索函数
const searchHandler = async()=>{
    let result = await quaryServerApi(searchServer.value.name,currentPage.value,pageSize.value)
    //放数据
    serverList.value=result.data.nursingList
    //分页数据完善
    total.value = result.data.total
}
//清空操作
const clearHandler = ()=> {
  searchServer.value.name=''
  searchHandler()
}

//-------------------
//------------------------------新增相关内容

//新增/修改表单 
//存放发送给后端的数据
const formData = ref({
  name:'',
  orderNo:'',
  unit:'',
  price:'',
  //image:'',
  nursingRequirement:'',
  status:'',
  createBy:'',
  updateBy:'',
  remark:'',
  createTime:'',
  updateTime:'',
})
//定义变量控制新增/修改对话框是否显示
const dialogShow= ref(false)

//定义函数控制新增/修改对话框是否显示
const showDialog = ()=>{
  dialogShow.value=true;
  tips.value = "新增护理项目"
}

//定义对话框的标题
const tips = ref('新增护理项目')

//新增方法(点击保存的时候)
const addServer=async()=>{
  let result = null
  //如果表单的id存在
  if(formData.value.id){
    //调用修改方法
    result= await updateByIdApi(formData.value)
      //下面这个如果不放到定义result的方法里面那么result就是空值自然不会判断
      if(result){
        ElMessage.success("修改成功")
        // 将弹框关闭
        dialogShow.value = false
        searchHandler()
      }else{
        ElMessage.error("修改失败")
      }
  }else{
    result =await addServerApi(formData.value);
    //下面这个如果不放到定义result的方法里面那么result就是空值自然不会判断
    if(result){
      ElMessage.success("新增成功")
      // 将弹框关闭
      dialogShow.value = false
      searchHandler()
    }else{
      ElMessage.error("新增失败")
    }
  }
  
}

//修改操作(将数据回显到弹框并将名字改成修改员工)
  //1.定义一个点击事件,进行回显操作
  const queryServerById= async(id)=>{
    //调用emp.js中根据id来查询数据的方法
    let result= await getServerByIdApi(id)
    
    //将数据里面的data给表单
    formData.value=result.data
    // //这里后端的begin和start在前端是在集合里面
    // formData.value.exprList.forEach((items,index)=>{
    //   //把后端的begin和end的两个数据添加到到一个名字叫data数组当中，因为当时绑定这两个时间的v-modle="exp.data"
    //   //数组的forEach 可以获取每一个对象，并将每一个对象对应的值赋给两个时间对应的数组，那么就通过双向绑定取到对应的值
    //   //这个data名字也有讲究 如果表单绑定的名字不是data那么这边也不能是data
    //   items.data=[]
    //   items.data.push(items.begin)
    //   items.data.push(items.end)
    // })

    //将对话框标题改成修改员工
    tips.value="修改员工"
    //显示对话框
    dialogShow.value=true
    //-------------------------------------------------------------------------------------------------------------
    //注意：这里的性别和职位的数据有点问题，因为他的返回值是数字类型 并不是字符串类型 所以判断不出来对应值
    //所以可以在前端（比较麻烦 每个地方都需要进行处理）或者后端处理 （只需要处理一次，一劳永逸）  
    //部门之所以显示数字1而没有问题是因为他是动态展示（访问后端）的结果
    //------------------------------------------------------------------------------------------------------------
  }
  //2.进行保存,不过此时不在这里继续写，而是在新增那里写，因为对话框都是同一个




//------------------------------------------------------------------------
//界面的删除员工操作（批量和单独删除）
  //存放得到的数组
  const deleteIds = ref([]);

  //点击勾选框调用的方法
  //定义勾选框的关联表格内容的操作方法handleSelectionChange,处理所有选中的行信息
  //当用户勾选表格行时，这个方法会被触发。参数 selection 是一个数组，包含当前所有被选中的行数据。
  //得到的数据有很多 map形式即集合  我们只需要id   方法（）内的名字自己随便定义
  const handleSelectionChange =(selection)=>{
    //定义变量接收集合中的id值
    let idCollections= selection.map(function(item){
      //返回值只有一行，可以写成类似java中的lambda表达式
      //提取所有选中的id
      return item.id
      
    })
    deleteIds.value=idCollections
    // console.log(deleteIds)
  }

  
  //点击批量删除调用的方法
  const deleteByIds=async()=>{
    //调用js中定义的删除方法
    let result= await deleteByIdApi(deleteIds.value)
    //searchHandler  刷新界面
    searchHandler()
  }

  //单独删除操作的方法
  const deleteById=(id)=>{
    //将id给批量删除需要用到存放id的数组当中
    deleteIds.value=[id]
    //再调用批量删除的方法，这样十分方便
    deleteByIds()
    console.log(id)
  }





//预加载
onMounted(()=>{
    searchHandler()
})

</script>

<template>
    <!-- 表单 -->
     <el-form :inline="true" :model="searchServer" label-width="auto" style="max-width: 800px">
        <el-form-item label="名称" style="width: 200px;">
        <el-input v-model="searchServer.name" />
        </el-form-item>
        
        <el-form-item>
        <el-button type="primary" @click="searchHandler">搜索</el-button>
        </el-form-item>
        <el-form-item>
        <el-button type="danger" @click="clearHandler">重置</el-button>
        </el-form-item>
    </el-form>

    <el-form :inline="true">
        
        <el-button type="primary" @click="showDialog">新增</el-button>
        <el-button type="success" @click="">修改</el-button>
        <el-button type="danger" @click="">删除</el-button>
        <el-button type="info" @click="">导出</el-button>
    </el-form>

    <!-- 表格 -->
     <el-table :data="serverList" @selection-change="handleSelectionChange"  style="width: 100%">
        <!-- 上面一行的@selection-change="handleSelectionChange" 是点击下面显示的勾选框时可以绑定对应的表格内的行内容 -->
        <!-- 下面这一行el-table-column是显示表格勾选框 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="orderNo" label="排序号" width="80" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="price" label="价格" width="80" />
        <el-table-column prop="image" label="图片" width="180" />
        <el-table-column prop="nursingRequirement" label="护理要求" width="180" />
        <el-table-column prop="status" label="状态" width="180" >
          <template #default="scope">
                {{scope.row.status==0? '禁用':'启用'}}
          </template> 
        </el-table-column>
        <!-- <el-table-column prop="gender" label="性别" width="180" >
        <template #default="scope">
            <el-tag v-if="scope.row.gender==1">男</el-tag>
            <el-tag v-else>女</el-tag>
        </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <!-- queryEmpById(scope.row.id) 取到这一行数据的id并将id作为参数给这个方法 -->
                <el-button link type="primary" size="small" @click="queryServerById(scope.row.id)">
                修改
                </el-button>
                <el-button link type="primary" size="small" @click="deleteById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

     <!-- 分页实现 -->
    <div class="page">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9, 12]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>


    <!-- 添加或修改护理项目对话框 -->
    <el-dialog :title="tips" v-model="dialogShow" width="500px" >
      <el-form ref="nursingProjectRef" :model="formData"  label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="排序号" prop="orderNo">
          <!-- <el-input v-model="form.orderNo" placeholder="请输入排序号" /> -->
          <el-input-number v-model="formData.orderNo" :min="1" :max="100"  />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="formData.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <!-- <el-input v-model="form.price" placeholder="请输入价格" /> -->
          <el-input-number v-model="formData.price" :step="10" />
        </el-form-item>

        <!-- <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="np in nursing_project_status" :key="np.value" :label="np.value">{{ np.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="状态">
          <el-input v-model="formData.status" placeholder="请输入状态(0和1)" />
        </el-form-item>

        <!-- <el-form-item label="图片" prop="image">
          <image-upload v-model="formData.image"/>
        </el-form-item> -->
        <el-form-item label="护理要求" prop="nursingRequirement">
          <el-input v-model="formData.nursingRequirement" placeholder="请输入护理要求" />
        </el-form-item>
        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addServer">保存</el-button>
          <el-button @click="dialogShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    
</template>

<style scoped>
</style>